<template>
  <div class="protocol-page">
    <div class="header">
      <div class="logo">
        <!-- <img src="../assets/tq1.png" alt="" class="tq1" /> -->
      </div>
      <div class="r">
        <div class="r1" @click="goHome">{{ $t('首页') }}</div>
        <div class="r1" @click="goWj" v-if="$store.state.userInfoK.uid != ''">{{ $t('问卷') }}</div>
        <div class="r1" @click="toggleLang">{{ $t('中文/English') }}</div>
        <div v-if="$store.state.userInfoK.uid != ''" class="r1" @click="goToProfile">{{ $store.state.userInfoK.nick_name
          }}</div>
        <div v-else class="r1" @click="goLogin" style="cursor: pointer;">{{ $t('登录') }}</div>
      </div>
    </div>

    <div class="content">
      <div class="title">{{ displayTitle }}</div>
      <SafeHtml :content="displayHtml" customClass="html" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { useI18n } from 'vue-i18n'
import { noticelnfo } from '@/api/index'
import SafeHtml from '@/components/SafeHtml.vue'

const route = useRoute()
const router = useRouter()
const store = useStore()
const i18n = useI18n()

const info = ref({ title: '', e_title: '', text: '', e_text: '' })

const fetchData = async (id) => {
  try {
    const res = await noticelnfo({ id })
    info.value = res?.data || {}
  } catch (e) {
    info.value = { title: '', e_title: '', text: '', e_text: '' }
  }
}

const currentId = computed(() => Number(route.query.id) || 0)

watch(
  () => currentId.value,
  (v) => {
    if (v) fetchData(v)
  },
  { immediate: true }
)

const displayTitle = computed(() => {
  return i18n.locale.value === 'zh' ? (info.value.title || '') : (info.value.e_title || info.value.title || '')
})

const decodeHtml = (html) => {
  const txt = document.createElement('textarea')
  txt.innerHTML = html || ''
  return txt.value
}

const displayHtml = computed(() => {
  let raw = i18n.locale.value === 'zh' ? (info.value.text || '') : (info.value.e_text || info.value.text || '')
  if (typeof raw === 'string') {
    const trimmed = raw.trim()
    if ((trimmed.startsWith('"') && trimmed.endsWith('"')) || (trimmed.startsWith("'") && trimmed.endsWith("'"))) {
      raw = trimmed.slice(1, -1)
    } else {
      raw = trimmed
    }
  }
  return decodeHtml(raw)
    .replace(/&lt;/g, '<')
    .replace(/&gt;/g, '>')
    .replace(/&amp;/g, '&')
    .replace(/&quot;/g, '"')
    .replace(/&#39;/g, "'")
    .replace(/\\\//g, '/')
    .replace(/\\\"/g, '"')
    .replace(/\\n/g, '<br>')
    .replace(/\\r\\n/g, '<br>')
    .replace(/\\r/g, '<br>')
})

const goHome = () => router.push('/home')
const goWj = () => router.push('/homepage')
const goToProfile = () => router.push('/user')
const goLogin = () => router.push('/login')
const toggleLang = () => {
  if (i18n.locale.value === 'zh') {
    i18n.locale.value = 'en'
    cookie.set('localLang', 'en')
    location.reload()
  } else {
    i18n.locale.value = 'zh'
    cookie.set('localLang', 'zh')
    location.reload()
  }
}
</script>

<style scoped lang="scss">
.protocol-page {
  margin: 0 auto;
  padding-bottom: 120px;

  .header {
    padding: 30px 100px;
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(#409EFF, .8);
    color: #fff;

    .logo {
      width: 163px;
      height: 67px;

      img {
        width: 100%;
      }
    }

    .r {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .r1 {
        font-family: Arial, Arial;
        font-weight: normal;
        font-size: 25px;
        margin: 0 31px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
  }

  .content {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 0 24px rgba(0,0,0,0.06);

    .title {
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 16px;
      color: #2d2d2d;
      text-align: center;
    }
    .html {
      font-size: 16px;
      line-height: 1.8;
      color: #333;
    }
  }
}
</style>

